<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <el-scrollbar>
          <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            :default-active="activePath"
            text-color="#fff"
            router
          >
            <div class="user">
              <img v-if="userinfo.user_pic" :src="userinfo.user_pic" alt="" />
              <img v-else src="../assets/images/touxiang.jpg" alt="" />
              <span>欢迎：{{ userinfo.username }}</span>
            </div>
            <el-menu-item index="welcome" @click="saveNavState('welcome')">
              <el-icon><House /></el-icon>首页
            </el-menu-item>
            <el-sub-menu
              v-for="item in menuList"
              :key="item.index"
              :index="item.index"
            >
              <template #title>
                <el-icon v-if="item.name === '文章管理'"><Notebook /></el-icon>
                <el-icon v-else-if="item.name === '个人中心'"><User /></el-icon>
                {{ item.name }}
              </template>
              <el-menu-item
                v-for="childItem in item.child"
                :key="childItem.id"
                :index="childItem.index"
                @click="saveNavState(childItem.index)"
              >
                {{ childItem.name }}
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
      </el-aside>
      <el-container style="display: flex; flex-direction: column">
        <el-header height="66px">
          <div class="logo">社区资讯后台管理系统</div>
          <div class="right">
            <!-- <div class="my-center">个人中心</div> -->
            <el-popconfirm
              title="确定要退出吗?"
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="handleLogout"
              @cancel="cancelEvent"
            >
              <template #reference>
                <div class="logout">
                  <el-icon><SwitchButton /></el-icon> <span>退出</span>
                </div>
              </template>
            </el-popconfirm>
          </div>
        </el-header>
        <el-main>
          <!-- 路由占位符 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import store from "../store";

const router = useRouter();

// 菜单数据
const menuList = [
  {
    index: "2",
    name: "文章管理",
    icon: "",
    child: [
      {
        id: "1",
        index: "article-classify",
        name: "文章分类",
      },
      {
        id: "2",
        index: "article-list",
        name: "文章列表",
      },
    ],
  },
  {
    index: "3",
    name: "个人中心",
    icon: "",
    child: [
      {
        id: "1",
        index: "user-information",
        name: "基本资料",
      },
      {
        id: "2",
        index: "set-head-portrait",
        name: "更换头像",
      },
      {
        id: "3",
        index: "reset-password",
        name: "重置密码",
      },
    ],
  },
];
// 被激活的菜单地址
let activePath = computed(() => {
  return store.state.activePath;
});

// 获取用户的基本信息
store.dispatch("getUserinfoRequest");

// 用户的基本信息
const userinfo = computed(() => {
  return store.state.userinfo;
});

// 获取文章分类数据
store.dispatch("getarticleCatesRequest");

// 保存菜单的激活状态
const saveNavState = path => {
  store.commit("setActivePath", path);
  window.localStorage.setItem("menuAction", path);
};

// 退出登录
const handleLogout = () => {
  // 清除token
  window.localStorage.removeItem("token");
  // 改变vuex中的登录状态
  store.commit("setIsAuthenticated", false);
  // 跳转到登录页
  router.push({
    name: "login",
  });
  ElMessage.success("退出成功!");
};
// 取消退出
const cancelEvent = () => {
  ElMessage("已取消!");
};
</script>

<style lang="scss" scoped>
.common-layout {
  .el-menu {
    border-right: 1px solid #545c64;
    .user {
      height: 66px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;

      img {
        width: 32px;
        height: 32px;
        margin-right: 8px;
        border-radius: 50%;
      }
    }
  }
  .el-aside {
    height: 100vh;
    background-color: #545c64;
  }

  .el-container {
    .el-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #b3c0d1;

      .logo {
        font-size: 24px;
        font-weight: 700;
      }

      .right {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #616266;

        .my-center {
          font-size: 14px;
          padding: 0 20px;
          cursor: pointer;
        }
        .my-center:hover {
          color: #ffd000;
        }

        .logout {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0 20px;
          font-size: 18px;
          cursor: pointer;

          span {
            margin-left: 8px;
            font-size: 14px;
          }
        }
        .logout:hover {
          color: #ffd000;
        }
      }
    }
    .el-main {
      height: 200px;
      background-color: #e9eef3;
      overflow: scroll;
    }
  }
}
</style>
